@import './media_queries.styl'

$margin = 1rem
$min-col-w = 4rem

body, .wrapper
  margin 0
  border 0
  display flex
  flex-direction column
  max-width 100%
  // overflow-x hidden

.wrapper, .main
  min-height 100vh
  max-width 100%

.page, .data-page, .centered, .section
  max-width 100%

.data-page, .page, .section
  width 100%
  display flex
  flex-flow column wrap
  align-items center
  justify-content flex-start

.main, .cols, .home
  display flex
  flex 1 1 100%
  flex-flow row wrap

.main
  margin 0 1rem
  align-items flex-start
  flex-flow column nowrap
.hero,.container
  display flex
  flex 1 1 100%
  flex-flow row wrap

  .col-a, .col-b
    .box
      margin 0.25em 0

.col-a, .col-b
  flex 0 1 100%
  max-width 100%

.col-a
  order 1

.col-b
  order 2

@media $media_small
  .main
    margin 0 2rem

// Medium
@media $media_medium
  .main
    margin 0 5rem

  .col-a, .col-b
    margin 0
    flex 1 1 50%
    max-width 50%

  .hero,.container
    flex-flow row nowrap

    .col-a, .col-b
      flex 0 1 50%
      align-items flex-start

      .box
        margin 0 0.5em

// Large
@media $media_large
  .main
    margin 0 10rem

  .col-a
    margin 0

  .col-b
    margin 0

// XLarge
@media $media_xlarge
  .main
    margin 0 15rem